<template>
  <div>
    <!-- 申请信息 -->
    <CardTitle class="block mb-[10px]" :title="t('awardsAudit.title.applyInfo')" />
    <el-descriptions v-loading="formLoading" :column="1" border label-width="230">
      <el-descriptions-item :label="t('awardsAudit.fields.accountType')">
        {{ processVo.accountType }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('awardsAudit.fields.jobCode')">
        {{ processVo.jobCode }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('awardsAudit.fields.studentName')">
        {{ processVo.studentName }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('awardsAudit.fields.gender')">
        {{ processVo.gender }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('awardsAudit.fields.studentLevel')">
        {{ processVo.studentLevel }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('awardsAudit.fields.major')">
        {{ processVo.major }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('awardsAudit.fields.researchDept')">
        {{ processVo.researchDept }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('awardsAudit.fields.mentorName')">
        {{ processVo.mentorName }}
      </el-descriptions-item>
      <el-descriptions-item
        v-if="processVo.secondaryMentor"
        :label="t('awardsAudit.fields.secondaryMentor')"
      >
        {{ processVo.secondaryMentor }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('awardsAudit.fields.selfIntroduction')">
        {{ processVo.selfIntroduction }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('awardsAudit.fields.attachment')">
        <el-button
          v-if="processVo.attachment && processVo.attachment !== '[]'"
          link
          type="primary"
          @click="handlePreview"
        >
          {{ t('fileObjectDownload.buttonName') }}
        </el-button>
        <span v-else>{{ t('fileObjectDownload.noFile') }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 发表论文情况 -->
    <CardTitle class="block my-10px" :title="t('awardsAudit.title.paperSituation')" />
    <SelectedPaperTable
      :list="processVo?.studentPaperUseList ?? []"
      @preview="handleTableAttachmentPreview"
    />
    <!-- 专利情况 -->
    <CardTitle class="block my-10px" :title="t('awardsAudit.title.patentSituation')" />
    <SelectedPatentTable
      :list="processVo?.studentPatentUseList ?? []"
      @preview="handleTableAttachmentPreview"
    />
    <!-- 文件预览弹窗 -->
    <FilePreviewDialog ref="filePreviewRef" type="pdf" />
  </div>
</template>

<script setup lang="ts">
import { ProcessVoApi } from '@/api/bpm/processvo'
import { propTypes } from '@/utils/propTypes'
import SelectedPaperTable from '@/views/awards/candidate/components/SelectedPaperTable.vue'
import SelectedPatentTable from '@/views/awards/candidate/components/SelectedPatentTable.vue'
import FilePreviewDialog from '@/components/FilePreview/FilePreviewDialog.vue'

interface StudentAwardsApplyInfoVO {
  accountId: number
  accountType: string
  applySource: number
  attachment: string
  awardId: string
  awardLevel: string
  awardMajor: string
  createTime: string
  creator: string
  gender: string
  historyAwardsJson: string
  id: string
  jobCode: string
  major: string
  secondaryMentor: string
  mentorCode: string
  mentorId: number
  mentorName: string
  processStatus: number
  qualityStatus: number
  researchDept: string
  researchDeptId: number
  selfIntroduction: string
  studentLevel: string
  studentName: string
  templateId: string
  studentPaperUseList: any[]
  studentPatentUseList: any[]
}

defineOptions({ name: 'BpmPaperDetail' })

const props = defineProps({
  id: propTypes.string.def(undefined)
})

const { query } = useRoute() // 查询参数
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const queryId = query.id as unknown as string // 从 URL 传递过来的 流程实例ID

const processVo = ref<StudentAwardsApplyInfoVO>({} as StudentAwardsApplyInfoVO)

const formLoading = ref(false)

const filePreviewRef = ref<InstanceType<typeof FilePreviewDialog>>()
const handlePreview = () => {
  if (!processVo.value.attachment) {
    return
  }
  filePreviewRef.value?.open(processVo.value.attachment)
}

const handleTableAttachmentPreview = (attachment: string) => {
  console.log(attachment)
  if (!attachment) {
    message.error(t('fileObjectDownload.error'))
    return
  }
  filePreviewRef.value?.open(attachment)
}

onMounted(async () => {
  formLoading.value = true
  const response = await ProcessVoApi.getProcessVoByProcessInstanceId(props.id || queryId)
  formLoading.value = false
  processVo.value = JSON.parse(response.vo)
})
</script>
